import React, { Component } from 'react';
import _ from 'underscore';

import dispatcher from 'lib/dispatcher';
import queryStore from 'lib/util/QueryStore.es6';

import PercentSilder from './PercentSilder.jsx';
import FavoriteView from './FavoriteView.jsx';
import FavoriteManager from './FavoriteManager.jsx';

export default class MainView extends Component {
  saveFavorite() {
    if (this.props.chartParameter) {
      FavoriteView.mount({
        title: this.props.title || '',
        events: this.props.events,
        chartParameter: this.props.chartParameter,
        onClose: res => {
          if (res && res.isSuccess) {
            dispatcher.dispatch(res.result);
          }
        }
      });
    } else {
      Info('页面数据加载不完全，无法添加到收藏。');
    }
  } // saveFavorite

  editFavorite(favoriteId) {
    if (this.props.chartParameter) {
      FavoriteView.mount({
        id: favoriteId,
        title: this.props.favoriteName || '',
        events: this.props.events,
        alias: this.props.alias,
        chartParameter: this.props.chartParameter,
        onClose: res => {
          if (res && res.isSuccess) {
            dispatcher.dispatch(res.result);
          }
        }
      });
    } else {
      Info('页面数据加载不完全，无法编辑收藏。');
    }
  } // editFavorite

  percentChangeHandler(value) {
    dispatcher.dispatch({
      $type: 'change_chart_percent',
      value
    });
  } // percentChangeHandler

  refreshDataHandler() {
    dispatcher.dispatch({
      $type: 'refresh_data'
    });
  } // refreshDataHandler

  downloadHandler() {
    this.refs.form.click();
  } // downloadHandler

  openFavoriteHandler() {
    FavoriteManager.mount({
      events: this.props.events,
      onClosed: item => dispatcher.dispatch({
        $type: 'reset_data_source',
        item
      })
    });
  } // openFavoriteHandler

  render() {
    let hash = queryStore.get();
    let fileName = '行为事件分析';
    if (_.size(hash)) {
      fileName += ` -- ${ hash.from_date } 至 ${ hash.to_date }`;
    }
    if (hash.compare_from_date) {
      fileName += ` -- 比对 -- ${ hash.compare_from_date } 至 ${ hash.compare_to_date }`;
    }
    return (
      <div className="baner">
        {
          this.props.favoriteId
            ? (
              <div className="lbtn-gray" onClick={ this.editFavorite.bind(this, this.props.favoriteId) }>
                <i className="iconfont">&#xe6bb;</i>
                <span className="text">{ this.props.favoriteName }</span>
              </div>
            ) : (
              <div className="lbtn-gray" onClick={ this.saveFavorite.bind(this) }>
                <i className="iconfont">&#xe6b8;</i>
                <span className="text">添加分析到收藏</span>
              </div>
            )
        }
        <div className="tookit">
          <PercentSilder
            className="container"
            value={ this.props.percentValue }
            valueChanged={ this.percentChangeHandler.bind(this) } />
          <span className="lbtn-gray" style={{
            verticalAlign: 'top',
            margin: '1px 5px 0px'
          }}>
            <i
              className="iconfont"
              data-tip="刷新数据"
              onClick={ this.refreshDataHandler }
              style={{ fontSize: '18px' }}>
              &#xe61c;
            </i>
          </span>
          <span className="lbtn-gray">
            <i
              className="iconfont"
              data-tip="下载 CSV"
              onClick={ this.downloadHandler.bind(this) }>
              &#xe650;
            </i>
            <form method="POST" target="_self" action={ BlueWare.pageUrlPrefix + `/sd/${ BlueWare.appId }/api/events/report/csv?bookmarkId=` } style={{ display: 'none' }}>
              <input type="hidden" name="filename" value={ fileName } />
              <input type="hidden" name="form_data" value={ JSON.stringify(this.props.chartParameter) } />
              <input type="hidden" name="detail" value={ JSON.stringify({
                measures_name: _.map(this.props.eventIndicatorNames, p => p.text),
                fields_name: this.props.viewDimensionDic,
                rollup_date: false
              }) } />
              <input ref="form" type="submit"/>
            </form>
          </span>
          <span className="spliter">|</span>
          <span className="lbtn-gray">
            <i
              className="iconfont"
              onClick={ this.openFavoriteHandler.bind(this) }
              data-tip="收藏管理">
              &#xe6bc;
            </i>
          </span>
        </div>
      </div>
    );
  } // render
}
